<template>
  <div>
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="医生">
        <el-input v-model="searchForm.doctorName" placeholder="请输入医生姓名"></el-input>
      </el-form-item>
      <el-form-item label="科室">
        <el-input v-model="searchForm.departmentName" placeholder="请输入科室"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchForm.status" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option label="启用" value="1"></el-option>
          <el-option label="停用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="searchForm.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchList">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border style="width: 100%; margin-top: 20px;">
      <el-table-column prop="id" label="ID" width="80"/>
      <el-table-column prop="departmentName" label="科室" width="100"/>
      <el-table-column prop="serviceName" label="服务名称" width="150"/>
      <el-table-column prop="inquiryType" label="问诊类型" width="100"/>
      <el-table-column prop="chatCount" label="聊天次数" width="100"/>
      <el-table-column prop="serviceDuration" label="服务时长" width="100"/>
      <el-table-column prop="serviceIntroduction" label="服务介绍" width="200"/>
      <el-table-column prop="price" label="价格" width="80"/>
      <el-table-column prop="isPrescription" label="是否处方" width="80"/>
      <el-table-column prop="status" label="状态" width="80"/>
      <el-table-column prop="createdAt" label="创建时间" width="160"/>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="onEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="onToggleStatus(scope.row)">
            {{ scope.row.status === '启用' ? '停用' : '启用' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'DoctorServiceList',
  data() {
    return {
      searchForm: {
        doctorName: '',
        departmentName: '',
        status: '',
        dateRange: []
      },
      tableData: []
    }
  },
  created() {
    this.fetchList()
  },
  methods: {
    fetchList() {
      // 这里假设后端接口为 /doctorServices/list，GET请求
      axios.get('/doctorServices/list').then(res => {
        // 假设后端返回的数据结构为数组
        this.tableData = res.data
      })
    },
    resetForm() {
      this.searchForm = {
        doctorName: '',
        departmentName: '',
        status: '',
        dateRange: []
      }
      this.fetchList()
    },
    onEdit(row) {
      // 跳转到编辑页面或弹窗
      this.$message.info('编辑功能待实现')
    },
    onToggleStatus(row) {
      // 启用/停用功能
      this.$message.info('启用/停用功能待实现')
    }
  }
}
</script>